<template>
    <li>
        <!-- 左侧图片 -->
        <div>
            <img src="http://p0.meituan.net/movie/67a1fe8a23b913b305a37fed1c54b7a35019988.jpg" />
        </div>
        <!-- 右侧部分 -->
        <div>
            <div class="info-header">
                <h3>追虎擒龙</h3>
                <my-tip>
                    <template v-slot>
                        126565
                        <span>人想看</span>
                    </template>
                </my-tip>
            </div>
            <div class="info-body">
                <div>
                    <p>犯罪,剧情,动作</p>
                    <p>主演:古天乐,梁家辉,吴镇宇XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
                    <p>2021-04-30 本周六上映</p>
                </div>
                <my-button type="primary">预售</my-button>
            </div>
        </div>
    </li>
</template>

<script>
import MyButton from '@/components/MyButton'
import MyTip from '@/components/MyTip'

export default {
    props: ['item'],
    components: {
        MyButton,
        MyTip
    }
}

</script>
<style lang="scss" scoped>
@import '../assets/scss/mixin.scss';
li {
    height: 1.15rem;
    @include border-bottom-1px;
    padding: 0.12rem 0.12rem 0.12rem 0;
    display: flex;
    > div:first-child {
        margin-right: 0.1rem;
        img {
            width: 0.64rem;
        }
    }
    > div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .info-header {
            @include flex-layout(row, space-between);
        }
        .info-body {
            @include flex-layout(row, space-between);
            color: #666666;
            font-size: 0.14rem;
            // 超出部分使用省略号代替
            p {
                max-width: 2.1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>